<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3属性对层叠上下文的影响1</title>
    <style type="text/css">
        /* 案例一分解 */
          .box {
            display: flex;
        }



 /* html  +  img 
  1.层叠顺序：.box>div 普通的块级元素  >     img  z-index 负值
  flex (flexbox) 容器的子元素，且 z-index 值不为 auto；  =>  .box>div 层叠上下元素

  层叠顺序: div /   backrgound/border   <   负值    (层叠上下 <  z-index:负值)

  1.没有父元素添加属性display:flex的时候  

  .box div 块级元素    img  带定位的负值元素      块级 >  定位带负值   img被覆盖在下面 

   2.父元素添加属性display:flex的时候
    .box div 层叠上下元素     img  带定位的负值元素     层叠上下文的背景/边框  <  定位带负值   img 覆盖在blue容器的上面
  */
        .box>div {
            background-color: blue;
            z-index: 1;
        }

        .box>div>img {
            position: relative;
            z-index: -1;
            right: -150px;
        }
    </style>
</head>

<body>
    <!-- 案例一分解:display:flex/inline-flex; -->
    <div class="box">
        <div>
            <img src="images/mm1.jpg">
        </div>
    </div>
</body>

</html>